<template>
  <div class="view-container">

    <div class="main-content" style="padding-top: 0">
      <div class="list-container">
        <div class="my-tabs-container">
          <div class="my-tabs">
            <el-tabs v-model="activeName" style="width:100%" @tab-click="handleClick">
              <el-tab-pane label="进销存统计" name="distributors" />
              <el-tab-pane label="月度盘点" name="inventory" />
            </el-tabs>
            <el-button v-if="activeName === 'inventory'" class="main-btn" size="small" type="primary" @click="handlNew">
              新建月度盘点
            </el-button>
          </div>
        </div>
        <component :is="activeName" ref="refComponent" />
      </div>
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, reactive, toRefs,} from 'vue'

export default {
  name: 'Index',
  components: {
    distributors: defineAsyncComponent(() =>
      import('../modules/distributors.vue')
    ),
    inventory: defineAsyncComponent(() => import('../modules/inventory.vue')),
  },
  setup() {
    const data = reactive({
      activeName: 'distributors',
      refComponent: null,
    })

    const handlNew = () => {
      data.refComponent.handlNew()
    }

    return {
      ...toRefs(data),
      handlNew,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
